<template>
  <div class="card flex container" :style="{ width }">
    <div class="title flex">
      <b></b><span>{{ title }}</span>
    </div>
    <el-divider />
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>
<script setup lang="ts">
defineProps({
  title: {
    type: String
  },
  width: {
    type: String,
    default: '100%'
  }
})
</script>
<style scoped lang="scss">
.flex {
  display: flex;
}

* {
  padding: 0;
  margin: 0;
}

.container {
  margin-top: 10px;
  flex-direction: column;

  .title {
    height: 35px;
    margin: 0 10px;
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;

    b {
      display: block;
      width: 3px;
      height: 42%;
      background-color: #3a8fec;
      border-radius: 2px;
    }

    span {
      flex: 1;
      margin-left: 8px;
      font-size: 15px;
    }
  }

  .content {
    flex: 1;
  }
}
</style>
